import { CommandLabeledItemWrapper } from '@app-base/common/components/command-form/item-wrapper';
import { FieldProps } from '@rjsf/utils';
import { InputNumber } from 'antd';
import { useEffect, useState } from 'react';
import { Vector3Tuple } from 'three-legacy';

export const InputNumbersField = ({
  onChange,
  formData,
  uiSchema,
}: FieldProps<Vector3Tuple>) => {
  const [point, setPoint] = useState<Vector3Tuple>(
    formData?.length === 3 ? formData : [0, 0, 0],
  );
  const handleInputChange = (index: 0 | 1 | 2, value: number) => {
    const res = point?.map((item, ind) => {
      if (ind === index) {
        return value;
      }
      return item || 0;
    });
    const p: Vector3Tuple = [res[0], res[1], res[2]];
    setPoint(p);
  };

  useEffect(() => {
    onChange(point);
  }, [point]);

  return (
    <CommandLabeledItemWrapper
      textClassName='text-reset'
      label={uiSchema['ui:title']}
    >
      <InputNumber
        defaultValue={point?.[0] || 0}
        className='mr-2'
        size='small'
        placeholder='X'
        onChange={(value: number) => handleInputChange(0, value)}
      />
      <InputNumber
        defaultValue={point?.[1] || 0}
        className='mr-2'
        size='small'
        placeholder='Y'
        onChange={(value: number) => handleInputChange(1, value)}
      />
      <InputNumber
        defaultValue={point?.[2] || 0}
        size='small'
        placeholder='Z'
        onChange={(value: number) => handleInputChange(2, value)}
      />
    </CommandLabeledItemWrapper>
  );
};

export const Tips = ({ uiSchema }: FieldProps<Vector3Tuple>) => {
  return (
    <div className='d-flex align-items-center'>
      {uiSchema['ui:placeholder']}
    </div>
  );
};
